<template>
  <el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleClose" :close-on-click-modal="false"
    append-to-body :title="title">
    <el-form :model="form" ref="formRef" label-width="120px"
      style="max-height: 580px; overflow: hidden;overflow-y: scroll;">

      <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
        <el-input placeholder="请输入" v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="封面图" prop="pic">
        <!--  {{ imgsDefalut }} -->
        <ImgUploadPath ref="ImgUploadPath" :limit="1" @success="onUploadSuccess" @remove="onUploadRemove"
          :imgsDefalut="imgsDefalut" />
      </el-form-item>

      <el-form-item label="文章分类" prop="cate" :rules="[{ required: true, message: '请选择分类', trigger: 'blur' }]">
        <el-select v-model="form.cate" placeholder="请选择">
          <el-option v-for="item in cateType" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!--     <el-form-item label="内容" prop="content" :rules="[
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]">
        <el-input resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
          v-model="form.content"></el-input>
      </el-form-item> -->

      <el-form-item label="文章内容" prop="content" :rules="[{ required: true, message: '请输入文章内容', trigger: 'blur' }]">
        <Editor ref="editorBar" v-if="dialogVisible" v-model="form.content"></Editor>
      </el-form-item>

      <el-form-item label="文章置顶" prop="top">
        <el-switch v-model="form.top" :active-value="1" :inactive-value="0" active-text="已置顶" inactive-text="未置顶">
        </el-switch>
      </el-form-item>

      <el-form-item label="文章上下架" prop="down">
        <el-switch v-model="form.down" :active-value="0" :inactive-value="1" active-text="上架" inactive-text="下架">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tx-c">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { debounce } from "@/util";
import { ApiEditArticle, ApiAddArticle } from "@/api/index.js";
import ImgUploadPath from "@/components/imgUpload-path.vue";
import Editor from "@/components/editor.vue"
export default {
  components: {
    ImgUploadPath,
    Editor
  },
  data() {
    return {
      oldform: {
        title: "",
        cate: "",
        content: "",
        top: 0,
        down: 0,
      },
      form: {},
      btnLoading: false,
      dialogVisible: false,
      id: null,
      title: "",
      imgsDefalut: [],
      cateType: [
        {
          name: "慢病预防",
          id: "慢病预防"
        },
        {
          name: "心理健康",
          id: "心理健康"
        },
        {
          name: "中医养生",
          id: "中医养生"
        }
      ]

    };
  },
  computed: {
    ...mapState(["userState"]),
  },
  methods: {
    /*   getUnitList() {
        ApigetUnitList({ page: 1, size: 999 }).then(res => {
          this.unitListArr = res.data
        })
      }, */
    onUploadSuccess(path) {
      this.form.pic = path;
    },
    onUploadRemove() {
      this.form.pic = "";
    },
    confirm: debounce(
      function () {
        this.$refs["formRef"].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true;

            try {
              if (this.id) {
                await ApiEditArticle(this.form, this.id);
                this.$message.success("修改成功");
              } else {
                await ApiAddArticle(this.form);
                this.$message.success("添加成功");
              }

              this.handleClose();
              this.$emit("refresh");
            } finally {
              this.btnLoading = false;
            }
          } else return false;
        });
      },
      500,
      true
    ),

    show(row) {
      const data = row || this.oldform;
      for (const key in this.oldform) {
        this.$set(this.form, key, data[key]);
      }
      if (row) {
        this.id = row.id;
        this.title = "编辑科普信息";
        if (row.pic) this.imgsDefalut = [{ url: this.$path + row.pic }];
      } else {
        this.id = null;
        this.title = "添加科普信息";
      }
      this.dialogVisible = true;
    },

    handleClose() {
      this.dialogVisible = false;
      this.form = { ...this.oldform };
      this.$nextTick((_) => {
        this.$refs.formRef.clearValidate();
        this.$refs.ImgUploadPath.clear();
      });
    },
  },
};
</script>

<style></style>
